<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SimpleUI 示例中心-slider</title>
		<meta name="description" content="SimpleUI是一个基于jQuery的组件库，适合用于构建web2.0的应用程序和小型网站" />
		<meta name="keywords" content="jQuery js simple ui simpleUI web application" />
        <link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/SyntaxHighlighter.css"/>
        <link type="text/css" rel="stylesheet" href="../css/core.css"/>
        <style type="text/css">
            .demo-area{padding:15px;border:1px solid #eee;background:#fbfbfb;}
            .title{margin-bottom:10px; color: #333}
            .title p{color:#999}
            .title a{padding:1px 4px; text-decoration: none; margin:0 2px}
            .title a:hover{background:#038EFE; color: #FFF}
            
            .slide{width:505px; height: 250px; position: relative; overflow: hidden;}
            .slide-list li,.slide-list img{width:505px; height: 250px;}

            .shadow{position: absolute; left: 0; bottom: 0; height: 28px; background: #000; opacity: .5; filter:alpha(opacity=50);width:505px;}
            .trigger{position: absolute; left:0; bottom: 0; height: 28px;}
            .trigger li{float: left; display: inline; width: 101px; line-height: 28px; text-align: center;}
            .trigger a{display:block; color: #FFF; text-decoration: none;}
            .trigger .current a{background:#FFF; color: #000;}

            .triggers{position:absolute; right:5px; bottom:5px;}
            .triggers li{width:20px; height: 20px; float: left; display: inline; border-radius:20px; background: #FFF; text-align: center; line-height:20px; margin-left: 5px; color: #DE7D4B; opacity: .7; filter: alpha(opacity=70); cursor: pointer;}
            .triggers .current{background:#F60; color:#FFF; font-weight: 800;}
            .mt40{margin-top:40px;}
        </style>
    </head>
    <body>
        <div class="container clearfix" id="hd">
            <h1 class="s-logo"></h1>
            <div class="s-nav">
                <span class="s-nav-l"></span>
                <span class="s-nav-r"></span>
                <ul class="clearfix">
                    <li class="current">
                        <a href="/doc/doc.html">文档</a>
                    </li>
                    <li>
                        <a href="/doc/demo.html">示例</a>
                    </li>
                    <li>
                        <a href="http://code.google.com/p/simple-ui/downloads/list">下载</a>
                    </li>
                    <li>
                        <a href="/doc/deploy.html">部署</a>
                    </li>
					<li>
                        <a href="http://www.iqianduan.org/t-191-1-1.html" target="_blank">论坛</a>
                    </li>
                    <li>
                        <a href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container" id="bd">
            <h2 class="s-title">SimpleUI示例中心</h2>
            <div class="clearfix doc-content demo-content">
                <div class="api-content">
                    <h2 class="api-name">SimpleSlider Demo</h2>
                    <h3 class="api-guide">图片轮换调用实例(自定义triggers)</h3>
                    <textarea name="code" class="js"> 
                     $('#slide1').slider({
                        content : '.slide-list li',
                        trigger : '.trigger li',
                        triggerCurrentClass : 'current',
                        delay: 400
                    });
                    </textarea>
                    <div class="demo-area">
                        <div class="title">
                            <p>实现<a href="http://www.paipai.com/">拍拍网</a>的的幻灯效果</p>
                        </div>
                        <div class="slide" id="slide1">
                            <ul class="slide-list">
                                <li><img src="http://img5.paipaiimg.com/128685c5/boss-4e36046d-00000000185d69610001312162925000.1.jpg" alt="" /></li>
                                <li><img src="http://img6.paipaiimg.com/e29a1c29/boss-4e3224ae-00000000185d69610001311909038000.1.jpg" alt="" /></li>
                                <li><img src="http://img1.paipaiimg.com/c8c81dfc/boss-4e3a6729-00000000185d69610001312450345000.1.jpg" alt="" /></li>
                                <li><img src="http://img0.paipaiimg.com/07e78abd/boss-4e2fe0c0-00000000185d69610001311760576000.1.jpg" alt="" /></li>
                                <li><img src="http://img3.paipaiimg.com/6cfd8120/boss-4e375f93-00000000185d69610001312251795000.1.jpg" alt="" /></li>			
                            </ul>
                            <div class="shadow"></div>
                            <ol class="trigger">
                                <li><a href="#">店铺优惠券</a></li>
                                <li><a href="#">家居包邮费</a></li>
                                <li><a href="#">新店入驻三重礼</a></li>
                                <li><a href="#">百店夏末清仓</a></li>
                                <li><a href="#">充话费送化肥</a></li>
                            </ol>
                        </div>                        
                    </div>
                    
                    <h3 class="api-guide mt40">图片轮换调用实例(自动生成triggers)</h3>
                    <textarea name="code" class="js"> 
                     $('#slide2').slider({
                        content : '.slide-list li',
                        trigger : true,
                        triggerClass : 'triggers',
                        triggerCurrentClass : 'current',
                        delay : 400,
                        speed : 200,
                        timeout : 5000,
                        direction : 'top'
                    });
                    </textarea>
                    
                    <div class="demo-area">
                        <div class="title" >
                            <p>实现<a href="http://www.taobao.com/">淘宝网</a>的的幻灯效果</p>
                        </div>
                        <div class="slide" id="slide2">
                            <ul class="slide-list">
                                    <li><img src="http://img5.paipaiimg.com/128685c5/boss-4e36046d-00000000185d69610001312162925000.1.jpg" alt="" /></li>
                                    <li><img src="http://img6.paipaiimg.com/e29a1c29/boss-4e3224ae-00000000185d69610001311909038000.1.jpg" alt="" /></li>
                                    <li><img src="http://img1.paipaiimg.com/c8c81dfc/boss-4e3a6729-00000000185d69610001312450345000.1.jpg" alt="" /></li>
                                    <li><img src="http://img0.paipaiimg.com/07e78abd/boss-4e2fe0c0-00000000185d69610001311760576000.1.jpg" alt="" /></li>
                                    <li><img src="http://img3.paipaiimg.com/6cfd8120/boss-4e375f93-00000000185d69610001312251795000.1.jpg" alt="" /></li>			
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../SyntaxHighlighter/shCore.js"></script>
        <script src="../SyntaxHighlighter/allmin.js"></script>
        <script type="text/javascript">
            dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
            dp.SyntaxHighlighter.HighlightAll('code');
        </script>
        <script type="text/javascript" src="../../src/jquery.js"></script>
        <script type="text/javascript" src="../../src/_beta/SimpleCore.js"></script>
        <script type="text/javascript" src="../../src/_beta/SimpleSlider/SimpleSlider_v1.1.js"></script>
        <script type="text/javascript">
           $('#slide1').slider({
                content : '.slide-list li',
                trigger : '.trigger li',
                delay: 400,
                triggerCurrentClass : 'current'
            });
            
            $('#slide2').slider({
                content : '.slide-list li',
                trigger : true,
                triggerClass : 'triggers',
                triggerCurrentClass : 'current',
                delay : 400,
                speed : 200,
                timeout : 5000,
                direction : 'top'
            });
        </script>
		<span style="display:none"><script src="http://s24.cnzz.com/stat.php?id=3606083&web_id=3606083"></script></span>
    </body>
</html>
